<template>
  <div class="city">
    <div class="top">
      <!-- 1.搜索框 -->
      <van-search
        v-model="searchValue"
        shape="round"
        show-action
        placeholder="城市/区域/位置"
        @cancel="cancelClick"
      />
      <!-- 2.tab的切换 -->
      <van-tabs v-model:active="tabActive" color="#FF0000">
        <template v-for="(value, key, index) in allCities" :key="key">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="content">
      <cityGroup :currentGroup="currentGroup"></cityGroup>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import useCityStore from "@/store/modules/city";
import { storeToRefs } from "pinia";
import cityGroup from "./cpns/city-group.vue";

const router = useRouter();

//搜索框功能
const searchValue = ref("");
const cancelClick = () => {
  router.back(); //返回路由上一级
};

//tab的切换
const tabActive = ref();

// 从Store中获取数据
const cityStore = useCityStore();
cityStore.fetchAllCitiesData();
const { allCities } = storeToRefs(cityStore);

// 目的:获取选中标签后的数据
/**
 * 1.获取正确的key:将tabs中绑定的tabAction正确绑定
 * 2.根据key从allCities获取数据,默认直接获取的数据不是响应式的，所以必须包裹computed
 */
const currentGroup = computed(() => allCities.value[tabActive.value]);
</script>

<style lang="less" scoped>
.city {
  // top固定定位
  // .top {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  // }
  // .content {
  //   margin-top: 98px;
  // }

  z-index: 9;

  // 布局滚动
  .content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }
}
</style>
